<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="修改手机号" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="phone_box">
			<view class="nowphone">
				当前手机号：{{myphone}}
			</view>
			<view class="input_item">
				<u-input v-model="newphone" type="number" maxlength="11" :border="false" placeholder="新手机号" />
			</view>
			<!--<view class="input_item">
				<u-input v-model="pass" type="text" :border="false" placeholder="数字、字母、符号组合不少于6位的新密码" />
			</view>
			<view class="input_item">
				<u-input v-model="pass2" type="text" :border="false" placeholder="确认新密码" />
			</view>-->
			<view class="input_item">
				<u-input v-model="code" type="text" :border="false" placeholder="请输入手机验证码" />
				<view class="getCode" @tap="getCode">{{tips}}</view>
			</view>
			<view class="lijipay">
				<u-button hover-class="none" type="primary" shape="circle" :ripple="false" :disabled="disabled" :loading="Payloading" @click="lipay()">确定
				</u-button>
			</view>
		</view>

		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
    <!--没有绑定手机号，弹窗提示微信授权绑定手机号-->
    <u-popup v-model="isShowBindPhone" :mask-close-able="false" border-radius="20" mode="center" width="80%" height="350rpx" >
			<view class="bind_phone_box">
				<view class="bind_phone_title">提示</view>
        <u-line color="#EEEEEE" ></u-line>
        <view class="bind_phone_content">
          <view class="bind_phone_content_text">
            请授权微信绑定手机号后，才能领取新人奖励。
          </view>
        </view>
        <u-line color="#EEEEEE" ></u-line>
        <view class="bind_phone_content_btn">
          <button class="wechat-btn" @click="cancelFun" style="color: #888888">取消</button>
          <u-line color="#EEEEEE" direction="col"></u-line>
          <button class="wechat-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="color: #FD7C22;">授权绑定</button>
        </view>
			</view>
    </u-popup>
	</view>
</template>

<script>
	import bindphone from "@/mePages/pages/Bindphone.vue";

  export default {
    computed: {
      bindphone() {
        return bindphone
      }
    },
		data() {
			return {
				newphone: '',
				pass: '',
				pass2: '',
				code: '',
				
				Payloading: false,
				disabled: false,
				
				myphone: '',

				tips: '',
				// refCode: null,
				seconds: 60,
        isShowBindPhone: false, // 是否显示微信授权手机号弹窗
			}
		},
		onLoad() {
			this.myphone = uni.getStorageSync('userinfo').username
		},
    onShow() {
      if (!this.myphone){
        this.isShowBindPhone = true
      }
    },
		methods: {
			lipay() {
				let that = this
				if (that.newphone == '') {
					uni.showToast({
						title: '请输入新手机号',
						icon: 'none',
						duration: 2000
					})
				} else if (that.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 2000
					})
				} else {
					that.Payloading = true
					that.disabled = true
					that.$api.changeBingPhine({
						tel: that.newphone,
						code: that.code
					}).then(res => {
						that.Payloading = false
						that.disabled = false
						
						uni.showToast({
							title: '更新成功',
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
						
					}).catch(err => {
						that.Payloading = false
						that.disabled = false
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let that = this
				
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					that.$api.GetTixianCode({

					}).then(res => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}).catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					})

				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				//this.$u.toast('倒计时结束');
			},
			start() {
				//this.$u.toast('倒计时开始');
			},
      // 取消微信授权绑定手机，返回上一页面
      cancelFun(){
        uni.navigateBack({
          delta: 1
        })
      },
      // 微信授权绑定手机
      getPhoneNumber(e){
        console.log('用户信息==',e.detail)
        this.$api.getWXPhoneNumber({
          code: e.detail.code,
          encryptedData: e.detail.encryptedData
        }).then(res => {
          console.log('获取用户信息', res)
          uni.showToast({title:'手机号绑定成功！',icon:'success',duration: 2000})
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 2000)

        }).catch(err => {
          uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        })
      },
		}
	}
</script>

<style lang="scss">
	.phone_box {
		padding: 30rpx;
		
		.nowphone {
			font-weight: bold;
			font-size: 34rpx;
		}

		.input_item {
			border-radius: 200rpx;
			background-color: #f9f9f9;
			padding: 20rpx 40rpx;
			margin: 30rpx 0;
			position: relative;
			display: flex;
			align-items: center;

			u-input {
				flex: 1;
			}

			.getCode {
				//position: absolute;
				right: 0;
				top: 0;
				color: #0084FF;
			}
		}
	}

	.lijipay {
		width: 90%;
		margin-top: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 2%;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #FE9400, #FF3D22);
			color: #fff;
		}
	}
  /* 微信授权绑定手机css */
  .bind_phone_box{
    width: 100%;
    .bind_phone_title{
      font-size: 32rpx;
      text-align: center;
      color: #333333;
      line-height: 80rpx;
    }
    .bind_phone_content{
      padding: 30rpx 20rpx;
      .bind_phone_content_text{
        font-size: 28rpx;
        color: #888888;
        line-height: 60rpx;
      }
    }
    .bind_phone_content_btn{
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #333333;
      .wechat-btn{
        width: 50%;
        background: none;
      }
      .wechat-btn:after{

        border: none;
      }
    }
  }
</style>